<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script src="city.js"></script>
</head>
<style>
    .info {
        width: 40%;
    }
</style>

<body>
    <div class="layui-card">
        <div class="layui-card-header">
            欢迎光临<span></span> 的管理后台
        </div>
        <div class="layui-card-body">
            <form class="layui-form info" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div style="line-height: 39px" id="userid"></div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" autocomplete="off"
                            class="layui-input" id="userimg" />
                    </div>
                    <img src="https://img.wxcha.com/m00/ca/8a/f06ff994c2e870deea3c62190f77e8ec.jpg" style="
                                width: 100px;
                                hieght: 100px;
                                margin: 20px 124px;
                            " alt="" />
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" autocomplete="off"
                            class="layui-input" id="username" disabled />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" autocomplete="off"
                            class="layui-input" placeholder="请输入年龄" id="age" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-inline" style="width: 23%">
                        <select id="province" lay-filter="province" lay-verify="required">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-inline" style="width: 23%">
                        <select name="city" id="city" lay-filter="city" lay-verify="required">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-inline" style="width: 23%">
                        <select name="city" id="area" lay-verify="required">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="男" title="男" />
                        <input type="radio" name="sex" value="女" title="女" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">注册时间</label>
                    <div id="created_at" style="line-height: 39px" class="layui-input-block"></div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">
                            保存信息
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<script>
    //Demo
    var provinceIndex = 0
    layui.use('form', function () {
        var form = layui.form
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field))
            return false
        })
        showAddress()
        form.render()

        form.on('select(province)', function (data) {
            showCitys(data.value)
            provinceIndex = data.value
            form.render()
        })
        form.on('select(city)', function (data) {
            showArea(data.value)
            form.render()
        })
    })
    function showArea(cityIndex) {
        let data = citys[provinceIndex].city[cityIndex].area
        console.log(data)
        let html = '<option value="">请选择区域</option>'
        data.forEach((item, index) => {
            html += `<option value="${index}">${item}</option>`
        })
        $('#area').html(html)
    }
    function showCitys(proIndex) {
        let data = citys[proIndex].city
        let html = '<option value="">请选择市</option>'
        data.forEach((item, index) => {
            html += `<option value="${index}">${item.name}</option>`
        })
        $('#city').html(html)
    }
</script>
<script>
    $(function () {
        showUserInfo()
    })
    function showUserInfo() {
        data = localStorage.getItem('userInfo')
        if (data) {
            data = JSON.parse(data)
            $('span').html(data.username)
            $('#username').val(data.username)
            $('#userid').html(data.id)
            $('#age').val(data.age ?? '')
            $('#age').attr(
                'placeholder',
                data.age ? '请输入年龄' : '未填写'
            )
            $('#created_at').html(data.created_at)
        } else {
            location.href = './注册登录页面.html'
        }
    }
    function showAddress() {
        let html = '<option value="">请选择省</option>'
        citys.forEach((item, index) => {
            html += `<option value="${index}">${item.name}</option>`
        })
        $('#province').html(html)
    }
</script>

</html>